<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: tomato;
        }
    </style>
</head>
<body>
<!--
    事件分类：
       1. 鼠标事件   单击 双击
       2. 键盘事件   keydown  keyup
       4. 表单事件   获取焦点  失去焦点  改变事件(下拉选)
    事件的绑定形式:
        1. 先绑定事件   通过标签属性添加事件  onclick
        2. 后绑定事件   dom操作  获取节点  绑定事件
          步骤：
              1.  获取事件源  需要绑定事件的节点对象
              2.  绑定事件类型  单击 双击  鼠标移入移出
              3.  事件的处理   编写事件函数
-->
<button onclick="javascript:console.log('AA');">普通按钮1</button>
<button onclick="printInfo()">普通按钮2</button>
<button id="btn3">普通按钮3</button>


<div>


</div>


<script>

    function printInfo() {
        console.log('BB')
        console.log(this)   // window
    }

    var btn3 = document.getElementById('btn3')
    //  onclick  单击事件   双击 ondblclick
    btn3.ondblclick = function () {
        console.log('这是后绑定事件')
        console.log(this.innerText)
    }


    // btn3.onclick = () => {
    //     console.log('这是后绑定事件')
    //     console.log(this)    //   widow对象
    //     console.log(this.innerText)   // undefined
    // }


    //  鼠标移动事件的绑定
    var div = document.getElementsByTagName('div')[0]
    //  鼠标移入事件
    div.onmouseenter = function (){
        console.log('mouseenter')
        this.innerText = 'mouseenter'
        this.style.backgroundColor = 'red'
        this.style.color = 'white'
    }
    // 鼠标的移出事件
    div.onmouseout= function (){
        console.log('mouseout')
        this.innerText = 'mouseout'
        this.style.backgroundColor = 'green'
        this.style.color = 'white'
    }

    // 鼠标的移动事件
    div.onmousemove= function (){
        console.log('mousemove')
    }

</script>


</body>
</html>